import React, { Component } from 'react';
import { createForm } from 'rc-form';
import {
    WhiteSpace,
    Flex,
    List,
    Button,
    Icon,
    Grid,
    Modal,
    Switch,
    WingBlank,
    Carousel
} from 'antd-mobile';
import { connect } from 'dva';
import MyScroll from '../../components/MyScroll/MyScroll';
import CanChangeScroll from '../../components/CanChangeScroll/CanChangeScroll';
import NavTopBar from '../../components/NavTopBar/NavTopBar';
import NoLazyImg from '../../components/NoLazyImg/NoLazyImg';
import xing from '../../assets/svg/xing.svg';
import xing2 from '../../assets/svg/xing2.svg';
import dianzan from '../../assets/svg/dianzan.svg';
import dianzan1 from '../../assets/svg/dianzan1.svg';
import {Detail} from './evaluateDetail.less';
import { routerRedux } from 'dva/router';
import Moment from "moment/moment";
import {evalute_madel} from "./EvaluateListItem.less";
import {go_top} from "../home/Home.less";
import {Toast} from "antd-mobile/lib/index";
const Item = List.Item;

//import { merch_bill } from './MerchBill.less';

class EvaluateDetail extends Component {
    constructor(props) {
        super(props);
        this.state = {
            visible:false,
            num:0,
            value:""
        };
        this.AlloyTouch=null;
        this.timeout = "";
    }

    onChange = (e) => {
        this.setState({
            value: e.target.value
        });
    };
    componentDidMount() {

    }
    like=()=>{
        const { evaluateDetailEntity=[] ,secondLevelEvaluateGoodsEntityList=[]} =this.props.evaluateDetail;
        this.props.dispatch({type:"evaluateDetail/evaluateLikeEFF",obj:{id:evaluateDetailEntity.gevalId }}).then(result=>{
            if(result.code==200){
                Toast.success(result.msg,1.5,()=>{
                    this.props.dispatch({type:"evaluateDetail/evaluateDetailEFF",obj:{id:evaluateDetailEntity.gevalId}})
                })
            }else{

            }
        })
    }
    huifu=()=>{
        console.log(this.state.value)
        const { evaluateDetailEntity=[] ,secondLevelEvaluateGoodsEntityList=[]} =this.props.evaluateDetail;
        this.props.dispatch({type:"evaluateDetail/evaluateTwoEFF",obj:{id:evaluateDetailEntity.gevalId,gevalContent:this.state.value }}).then(result=>{
            if(result.code==200){
                Toast.success(result.msg,1.5,()=>{
                    this.props.dispatch({type:"evaluateDetail/evaluateDetailEFF",obj:{id:evaluateDetailEntity.gevalId}});
                    document.getElementById("huifu").value="";
                })
            }else{

            }
        })
    }
    show  = (i) =>{
        this.setState({
            visible:true,
            num:i
        })
    }
    handlePayModel = (visible) => {
        this.setState({
            visible:visible
        })
    }
    getAlloyTouch = (AT) =>{
        this.AlloyTouch = AT;
    };
    render() {
        const {dispatch,evaluateDetail,app}=this.props;
        const { evaluateDetailEntity=[] ,secondLevelEvaluateGoodsEntityList=[]} = evaluateDetail;
        // const { list } = order;
        console.log(this.props)
        let { targetScrollHeight } = app;
        let { visible, num,isLike } = this.state;
        console.log(evaluateDetailEntity.gevalScore);
        const imgArr = evaluateDetailEntity.gevalImage||[];

        return (
            <Flex
                style={{
                    height:"100%",
                    background:"#fff"
                }}
                direction="column"
                className={ Detail }
            >
                <NavTopBar
                    dispatch={dispatch}
                    title="评论"
                >
                </NavTopBar>
                {evaluateDetailEntity!==undefined?
                    <MyScroll   getAlloyTouch={ this.getAlloyTouch }>
                        <WingBlank>
                            <Flex style={{ padding:'0.2rem 0' }} justify="between">
                                <Flex>
                                    <div className="mmember_avatar">
                                        <NoLazyImg src={evaluateDetailEntity.gevalFrommemberAvatar||""}></NoLazyImg>
                                    </div>
                                    <Flex style={{ marginLeft:'0.2rem' }} direction="column" align="start">
                                        {/*<div style={{ marginBottom:'0.1rem' }}>{ evaluateDetailEntity.gevalIsAnonymous ==1 ? evaluateDetailEntity.gevalFrommembername.replace(/(.).*(.)/, "$1***$2") : evaluateDetailEntity.gevalFrommembername  }</div>*/}
                                        <div style={{ marginBottom:'0.1rem' }}>{ evaluateDetailEntity.gevalFrommembername  }</div>
                                        <div>
                                            {
                                                [...Array(evaluateDetailEntity.gevalScore||0)].map((_, ii) => {
                                                    return <Icon size="xxs" type={xing.id} key={ii} />
                                                })
                                            }
                                            {
                                                [...Array(5 - evaluateDetailEntity.gevalScore||0)].map((_, ii) => {
                                                    return  <Icon size="xxs" type={xing2.id} key={ii} />
                                                })
                                            }
                                        </div>
                                    </Flex>
                                </Flex>
                                <div style={{ color:"#999" }}>{evaluateDetailEntity.gevalAddTime!==""?Moment(evaluateDetailEntity.gevalAddTime).format('YYYY/MM/DD/h:mm:ss'):""}</div>
                            </Flex>

                            <div  style={{ color:"#666", padding:"0.2rem 0rem" }}>{ evaluateDetailEntity.gevalContent  }</div>
                            <div style={{ width:"100%" }}>
                                {imgArr.map((vv,ii,aa)=>{
                                    return (
                                        <div onClick={ ()=>{ this.show(ii) } } style={{ paddingLeft:"0rem",width:"100%",height:"5rem" ,marginBottom:".3rem"} } className="gevalImage" key={ii}>
                                            <NoLazyImg  src={vv}></NoLazyImg>
                                        </div>
                                    )
                                })}
                                {/*{ imgArr.length>4 ? <div className="geval_image_length">共{imgArr.length}张</div>:"" }*/}
                            </div>
                            {evaluateDetailEntity.review!==undefined&& <div>
                                <Flex justify="between" style={{borderLeft:"6px solid #ff0036"}}>
                                    <div style={{marginLeft:".2rem",fontSize:".3rem"}}>{evaluateDetailEntity.review.day!==undefined&&evaluateDetailEntity.review.day}</div>
                                    <div style={{ color:"#999" }}>{evaluateDetailEntity.review.time!==""?Moment(evaluateDetailEntity.review.time).format('YYYY-MM-DD h:mm:ss'):""}</div>
                                </Flex>
                                <Flex style={{marginLeft:".2rem",fontSize:".3rem",color:"#666",marginTop:".3rem",lineHeight:".5rem"}}>
                                    {evaluateDetailEntity.review.content}
                                </Flex>
                                <Flex style={{ position:'relative' }}>
                                    {evaluateDetailEntity.review.picture!==""&&evaluateDetailEntity.review.picture.slice(0,4).map((vv,ii,aa)=>{
                                        return (
                                            <div onClick={ ()=>{ this.show(ii) } } style={ ii==0 ? { paddingLeft:"0rem" }:{} } className="gevalImage" key={ii}>
                                                <NoLazyImg  src={vv} style={{width:"2rem",height:"2rem"}}></NoLazyImg>
                                            </div>
                                        )
                                    })}
                                    { evaluateDetailEntity.review.picture.length>4 ? <div className="geval_image_length">共{imgArr.length}张</div>:"" }
                                </Flex>
                            </div>}
                            <div
                                className="text-overflow-hidden spec_info"
                                dangerouslySetInnerHTML={{ __html: evaluateDetailEntity.specInfo }}
                            />
                        </WingBlank>


                        <Flex justify="between" onClick={()=>{
                            this.props.dispatch(routerRedux.push({
                                pathname: `/goodsDetail/${evaluateDetailEntity.specId}`,
                            }));
                        }} style={{background:"#F1F1F1",padding:".3rem",marginTop:".2rem"}}>
                            <Flex>
                                <NoLazyImg style={{width:"1rem"}} src={evaluateDetailEntity.goodsImage||""}></NoLazyImg>
                                <div style={{fontSize:".25rem",lineHeight:".4rem",margin:"0 .2rem"}}>{evaluateDetailEntity.gevalGoodsName}</div>
                            </Flex>
                            <Icon type="right" style={{width:".4rem",height:".4rem"}} ></Icon>
                        </Flex>
                        <WingBlank style={{paddingBottom:"2.5rem"}}>

                            <WhiteSpace></WhiteSpace>
                            {secondLevelEvaluateGoodsEntityList.length!==0?<div style={{fontSize:".25rem"}}>{secondLevelEvaluateGoodsEntityList.length }条评论</div>:""}
                            <WhiteSpace></WhiteSpace>
                            {secondLevelEvaluateGoodsEntityList.length==0?<div style={{width:"100%"}}>
                                <div className="pinglun"></div>
                                <div className="zanwu">快来回复抢沙发</div>
                            </div>:""}
                            {secondLevelEvaluateGoodsEntityList.map((v,i)=>{
                                console.log(v)
                                console.log(v.gevalAddtime)
                                return <Flex style={secondLevelEvaluateGoodsEntityList.length!==i+1?{ padding:'0.2rem 0',borderBottom:"1px solid #ccc" }:{ padding:'0.2rem 0'}} key={i} justify="between" align="start">
                                    <div className="mmember_avatar">
                                        <NoLazyImg src={v.memberAvatar ||""}></NoLazyImg>
                                    </div>
                                    <div style={{width:"100%",marginLeft:".2rem"}}>
                                        <Flex style={{ margin:'0.2rem 0' }}  justify="between">
                                            {/*<div style={{ fontSize:".25rem" }}>{ v.gevalIsanonymous ==1 ? v.gevalFrommembername.replace(/(.).*(.)/, "$1***$2") : v.gevalFrommembername   }</div>*/}
                                            <div style={{ fontSize:".25rem" }}>{ v.gevalFrommembername  }</div>
                                            <div style={{ color:"#999",fontSize:".25rem" }}>{v.gevalAddTime!==""?Moment(v.gevalAddtime).format('YYYY-MM-DD h:mm:ss'):""}</div>
                                        </Flex>
                                        <div style={{fontSize:".25rem",color:"#666"}}>{v.gevalContent }</div>
                                    </div>

                                </Flex>
                            })}
                        </WingBlank>
                    </MyScroll> :""}
                <Modal
                    visible={visible}
                    transparent
                    maskClosable={false}
                    className={evalute_madel}
                    //onClose={this.onClose('modal1')}
                    //title="Title"
                    // footer={[{ text: 'Ok', onPress: () => { console.log('ok'); this.onClose('modal1')(); } }]}
                    // wrapProps={{ onTouchStart: this.onWrapTouchStart }}
                >
                    <div style={{ height:"100%" }}>
                        <Flex className="title" justify="between">
                            <div
                                onClick={()=>{ this.setState({
                                    visible:false
                                }) }}
                            >
                                <Icon type="left" />
                            </div>
                            <div>
                                {num+1}/{imgArr.length}
                            </div>
                            <div></div>
                        </Flex>

                        <Flex className="ev_carousel">
                            <Carousel
                                //key={this.state.num}
                                //  className={index_banner}
                                selectedIndex={num}
                                //autoplay={data.length != 1}
                                autoplay={false}
                                afterChange={(n)=>{
                                    this.setState({
                                        num:n
                                    })
                                }}
                                infinite
                                dots={false}
                                // resetAutoplay={true}
                            >
                                {
                                    imgArr.map((item, index) => (
                                        <div key={index} style={{height:"5rem"}}>
                                            <NoLazyImg
                                                onClick={()=>{ this.setState({
                                                    visible:false
                                                }) }}
                                                onLoad={
                                                    ()=>{
                                                        window.dispatchEvent(new Event('resize'));
                                                    }
                                                }
                                                style={{ width:"100%", height:"100%" }}
                                                src={item}
                                            />
                                        </div>
                                    ))
                                }
                            </Carousel>
                        </Flex>


                        <CanChangeScroll wrapperId="EvaluateItemWraperId" targetId="EvaluateItemTargetId" className="evaluate_scroll">
                            <div>
                                {
                                    [...Array(evaluateDetailEntity.gevalScore||5)].map((_, ii) => {
                                        return <Icon size="xxs" type={xing.id} key={ii} />
                                    })
                                }
                                {
                                    [...Array(5 - evaluateDetailEntity.gevalScore||0)].map((_, ii) => {
                                        return  <Icon size="xxs" type={xing2.id} key={ii} />
                                    })
                                }
                            </div>
                            <div
                                style={{ fontSize:"0.22rem", color:"#ccc" }}
                                className="spec_info"
                                dangerouslySetInnerHTML={{ __html: evaluateDetailEntity.specInfo }}
                            />
                            <div style={{ padding:'0.1rem 0rem' }}>{ evaluateDetailEntity.gevalContent  }</div>
                        </CanChangeScroll>



                    </div>

                </Modal>
                {
                    targetScrollHeight < 0 ?  <div onClick={()=>{ this.AlloyTouch.to(0); }} className="go_top"></div> : ''
                }
                <Flex className="evaBottom">
                    <Flex className="search_input">
                        <input placeholder="输入你的评论 (50字以内)" onFocus={(e)=>{
                            this.timeout = setTimeout(function(){
                                e.target.scrollIntoView(true);
                                console.log('scrollIntoViewIfNeeded');
                            },300);
                        }} onBlur={()=>{
                            clearTimeout(this.timeout);
                        }} id="huifu" type="text" onChange={this.onChange} />
                    </Flex>
                    <div style={{color:"#ff0036",fontSize:".3rem",margin:"0 .1rem"}} onClick={this.huifu}>回复</div>
                    {evaluateDetailEntity.isLike==1? <Flex style={{marginRight:".3rem"}}>
                        <Icon type={dianzan1.id} onClick={this.like}/>
                        <span style={{color:"#ff0036"}}>{evaluateDetailEntity.likeCount }</span>
                    </Flex>: <Flex style={{marginRight:".3rem"}}>
                        <Icon type={dianzan.id} onClick={this.like}/>
                        <span style={{color:"#999"}}>{evaluateDetailEntity.likeCount }</span>
                    </Flex>}
                </Flex>
            </Flex>
        )
    }
}

export default connect(({app,evaluateDetail})=>({app,evaluateDetail}))(createForm()(EvaluateDetail));
